<template>
  <div class="general-page">
    <!-- 头部盒子 -->
    <div class="header">
      <!-- 页面标题 -->
      <div class="title">
        <h4>编码规则</h4>
      </div>
      <!-- 右侧新增按钮 -->
      <div>
        <el-button type="primary" plain @click="showAdd = true" size="small"
          >新增</el-button
        >
      </div>
    </div>

    <!-- table表格 -->
    <div class="table">
      <el-table :data="tableData" border style="width: 100%" height="500">
        <el-table-column
          prop="date"
          label="规则名称"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="编码长度"
          width="180"
        ></el-table-column>
        <el-table-column prop="address" label="编码规则"></el-table-column>
        <el-table-column prop="address" label="是否启用"></el-table-column>

        <el-table-column prop="address" label="操作" width="150">
          <template>
            <el-button size="mini" @click="edit">编辑</el-button>
            <el-popconfirm
              title="这是一段内容确定删除吗？"
              @confirm="confirmDel"
            >
              <el-button
                style="margin-left: 10px"
                size="mini"
                type="danger"
                slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增和编辑的对话框 -->
    <div class="dialogBox">
      <el-dialog
        :title="title"
        :visible.sync="showAdd"
        width="50%"
        :before-close="handleClose"
      >
        <el-form label-width="100px" ref="addRef">
          <el-form-item label="PDM库名称">
            <el-input style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="配置名称">
            <el-input style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="数据库地址">
            <el-input style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="数据库名称">
            <el-input style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="登录用户">
            <el-input style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="登录密码">
            <el-input style="width: 80%; margin-right: 10px"></el-input>
            <el-button type="success">测试</el-button>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-checkbox-group v-model="chechList">
              <el-checkbox label="ERP集成"></el-checkbox>
              <el-checkbox label="物料是否及时同步ERP"></el-checkbox>
              <el-checkbox label="消息通知"></el-checkbox>
              <el-checkbox label="审核校验"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item style="text-align: center">
            <el-button type="primary">保存</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { GetAllEncodingRulesApi } from "@/api/encode";
export default {
  data() {
    return {
      tableData: [],
      showAdd: false,
      chechList: [],
      title: "新增通用配置",
    };
  },
  created() {
    this.GetAllEncodingRules();
  },

  methods: {
    async GetAllEncodingRules() {
      const res = await GetAllEncodingRulesApi();
      this.tableData = res.data;
    },
    // 封装一个处理弹窗关闭的方法：需要关闭的时候调用，清楚表单的数据，初始化表单
    handleClose() {
      this.showAdd = false;
    },
    cancel() {
      this.showAdd = false;
    },
    edit() {
      this.showAdd = true;
      this.title = "编辑通用配置";
    },
    // 确认删除的回调
    confirmDel() {
      this.$message.success("删除成功");
    },
  },
};
</script>

<style lang="scss" scoped>
.general-page {
  background-color: #fff;
  padding: 0 50px 50px 50px;

  .header {
    display: flex;
    text-align: center;
    justify-content: space-between;
    align-items: center;
    // padding: 0 50px;

    .title {
      font-size: 20px;
    }
  }

  .table {
  }

  .dialogBox {
    margin: 0 auto;
  }
}
</style>